<template>
  <div class="app-container">
    <div class="form-main">
      <el-form ref="declareRef" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="赛事名称" prop="eventName">
              <el-select v-model="form.eventName" placeholder="请选择赛事名称" @change="handleSelectChange">
                <el-option value="其他" label="其他"></el-option>
                <el-option v-for="dict in parents" :key="dict.competitionName" :label="dict.competitionName" :value="dict.competitionName"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" v-if="open">
            <el-form-item prop="newEventName">
              <el-input v-model="form.newEventName" clearable placeholder="请输入赛事名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="赛项名称" prop=competitionName>
              <el-select v-model="form.competitionName" placeholder="请选择或输入赛项名称"
                         @change="handleSelectChildChange"
                         filterable allow-create>
                <el-option v-for="dict in children" :key="dict.itemName" :label="dict.itemName" :value="dict.itemName"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="showornot">
            <el-form-item label="专业大类" prop=category>
              <el-select v-model="form.category" placeholder="请选择专业大类">
                <el-option v-for="dict in sys_category_value" :value="dict.value" :key="dict.value"
                           :label="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="showornot">
          <el-col :span="12">
            <el-form-item label="主办方" prop=organizers>
              <el-input v-model="form.organizers" placeholder="请输入主办单位">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责部门" prop="deptCharge">
              <el-tree-select v-model="form.deptCharge" :data="deptOptions"
                              :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id"
                              placeholder="请选择归属部门" check-strictly/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="showornot">
          <el-col :span="12">
            <el-form-item label="比赛方式" prop="raceType">
              <el-select v-model="form.raceType" placeholder="请选择比赛方式">
                <el-option v-for="dict in sys_race_type" :value="dict.value" :key="dict.value" :label="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="赛道" prop="track">
              <el-select v-model="form.track" placeholder="请选择比赛方式">
                <el-option v-for="dict in sys_track_type" :value="dict.value" :key="dict.value" :label="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item v-if="showornot" label="上传文件">
          <el-input v-model="form.fileName" placeholder="请选择文件" readonly>
            <template #append>
              <el-button type="primary" @click="handleFileInputClick">浏览</el-button>
            </template>
          </el-input>
          <input type="file" ref="fileInput" @change="handleFileChange" style="display: none"/>
        </el-form-item>
        <el-form-item v-if="showornot" label="备注" prop="textarea">
          <el-input v-model="form.remake" type="textarea"/>
        </el-form-item>
        <div>
          <el-button type="primary" @click="submitDataScope" style="text-align: center;">上报</el-button>
          <el-button @click="reset" style="text-align: center;">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>


<script setup name="Declare">
import {addDeclare, contestList} from '@/api/contestment/declare'
import {listDept} from "@/api/contest/_dept";
import {onMounted} from "vue";

const {proxy} = getCurrentInstance();
const {
  sys_event_value,
  sys_category_value,
  sys_race_type,
  sys_track_type
} = proxy.useDict("sys_event_value", "sys_category_value", "sys_race_type", "sys_track_type")
const open = ref(false)
const showornot = ref(true)
const deptOptions = ref(undefined);

const data = reactive({
  form: {
    file: undefined, //文件
    eventName: undefined,   // 赛事名称
    competitionName: undefined, // 赛项
    newEventName: undefined,
    organizers: undefined, // 主办单位
    category: undefined,  // 专业大类
    deptCharge: undefined,   // 负责部门
    raceType: undefined,   // 方式
    track: undefined,   // 赛道
    remake: '',   // 备注
    optionType: undefined //操作类型  1保存 2提交
  },
  parents: {},
  children: {},
  rules: {
    eventName: [{required: true, min: 1, max: 20, message: "赛事为1 到 20 个字符", trigger: "change"}],
    newEventName: [{required: true, min: 1, max: 20, message: "赛事为1 到 20 个字符", trigger: "blur"}],
    competitionName: [{required: true, min: 1, max: 20, message: "赛项为1 到 20 个字符", trigger: "blur"}],
    category: [{required: true, min: 1, max: 20, message: "专业大类为1 到 20 个字符", trigger: "blur"}],
    organizers: [{required: true, min: 1, max: 20, message: "主办单位为1 到 20 个字符", trigger: "change"}],
    deptCharge: [{required: true, message: "请选择部门", trigger: "blur"}],
    raceType: [{required: true, min: 1, max: 20, message: "参赛方式为1 到 20 个字符", trigger: "blur"}],
    track: [{required: true, min: 1, max: 20, message: "赛道为1 到 20 个字符", trigger: "blur"}],
  }
})
const {form, parents, children, rules} = toRefs(data);


/** 表单重置 */
function reset() {
  form.value = {
    file: undefined,
    eventName: undefined,   // 赛事名称
    neweventName: undefined,
    competitionName: undefined, // 赛项
    organizers: undefined, // 主办单位
    category: undefined,  // 专业大类
    deptCharge: undefined,   // 负责部门
    raceType: undefined,   // 方式
    track: undefined,   // 赛道
    remake: undefined,   // 备注
    optionType: undefined,//操作类型
  };
  showornot.value = true;
  proxy.resetForm("declareRef");
}

/** 新增赛事*/
function handleSelectChange(value) {
  if (value === '其他') {
    open.value = true
    children.value = [];
  } else {
    const parent = parents.value.find(item => item.competitionName === form.value.eventName);
    if (parent){
      children.value = parent.competitionItemVos;
    }else {
      children.value = [];
    }
    form.value.neweventName = undefined;
    open.value = false
  }
}

/** 赛事列表 */
onMounted(async () =>{
  contestList().then(response => {
    parents.value = response.data.result;
    if (parents.value.length > 0){
      handleSelectChange()
    }
  })
})

/** 新增赛项 */
function handleSelectChildChange(value) {
  showornot.value = !children.value.some(item => item.itemName === value);
}

/** 查询部门下拉树结构 */
function getDeptTree() {
  listDept().then(response => {
    deptOptions.value = proxy.handleTree(response.data.result, "id");
  });
};

/** 上传文件 */
function handleFileChange(event) {
  form.value.file = event.target.files[0];
  form.value.fileName = event.target.files[0].name
}

/** */
function handleFileInputClick() {
  proxy.$refs['fileInput'].click()
}

/** 保存按钮 */
function saveDataScope() {
  // 保存 optionType = 1
  form.value.optionType = 1;
  if (form.value.eventName === '其他' && form.value.newEventName != undefined) {
    form.value.eventName = form.value.newEventName
  }
  proxy.$refs["declareRef"].validate(valid => {
    if (valid) {
      if (form.value !== undefined) {
        addDeclare(form.value).then(response => {
          proxy.$modal.msgSuccess("保存成功")
          reset()
        })
      }
    }
  })
}

/** 上报按钮 */
function submitDataScope() {
  // 提交 optionType = 2
  // form.value.optionType = 2;
  if (form.value.eventName === '其他' && form.value.newEventName != undefined) {
    form.value.eventName = form.value.newEventName
  }
  proxy.$refs["declareRef"].validate(valid => {
    if (valid) {
      if (form.value !== undefined) {
        addDeclare(form.value).then(response => {
          proxy.$modal.msgSuccess("提交成功")
          reset()
        })
      }
    }
  })
}

getDeptTree()


</script>

<style scoped>

</style>